<template>
  <div class="toolbar flex flex-wrap items-center gap-2 p-2 bg-gray-100 border-b">
    <!-- 格式工具栏 -->
    <div class="flex items-center gap-1 mr-4">
      <button class="p-1.5 rounded hover:bg-gray-200 transition-colors" :class="{ 'bg-blue-100': isBoldActive }" @click="toggleBold" title="粗体 (Ctrl+B)">
        <i class="fa fa-bold"></i>
      </button>
      <button class="p-1.5 rounded hover:bg-gray-200 transition-colors" :class="{ 'bg-blue-100': isItalicActive }" @click="toggleItalic" title="斜体 (Ctrl+I)">
        <i class="fa fa-italic"></i>
      </button>
      <button class="p-1.5 rounded hover:bg-gray-200 transition-colors" :class="{ 'bg-blue-100': isUnderlineActive }" @click="toggleUnderline" title="下划线 (Ctrl+U)">
        <i class="fa fa-underline"></i>
      </button>
    </div>

    <!-- 段落格式 -->
    <div class="flex items-center gap-1 mr-4">
      <select class="p-1.5 rounded border text-sm focus:outline-none focus:ring-1 focus:ring-blue-300" v-model="currentBlockType" @change="setBlockType(currentBlockType as string)">
        <option value="paragraph" selected>普通段落</option>
        <option value="heading">标题</option>
        <option value="chief-complaint">主诉</option>
        <option value="present-illness">现病史</option>
        <option value="past-medical-history">既往史</option>
        <option value="family-history">家族史</option>
        <option value="physical-exam">体格检查</option>
        <option value="diagnosis">诊断</option>
        <option value="treatment-plan">治疗计划</option>
        <option value="medication">用药</option>
      </select>
    </div>

    <!-- 医疗特定功能 -->
    <div class="flex items-center gap-1 mr-4">
      <button class="p-1.5 rounded hover:bg-gray-200 transition-colors" @click="insertMedicalTerm" title="插入医学术语">
        <i class="fa fa-stethoscope"></i>
      </button>
      <button class="p-1.5 rounded hover:bg-gray-200 transition-colors" @click="addReference" title="添加参考文献">
        <i class="fa fa-book"></i>
      </button>
    </div>

    <!-- 撤销/重做 -->
    <div class="flex items-center gap-1 mr-4">
      <button class="p-1.5 rounded hover:bg-gray-200 transition-colors" :disabled="!canUndo" @click="undo" title="撤销 (Ctrl+Z)">
        <i class="fa fa-undo"></i>
      </button>
      <button class="p-1.5 rounded hover:bg-gray-200 transition-colors" :disabled="!canRedo" @click="redo" title="重做 (Ctrl+Y)">
        <i class="fa fa-repeat"></i>
      </button>
    </div>

    <!-- 模板 -->
    <div class="flex items-center gap-1">
      <button class="px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors" @click="openTemplateModal"><i class="fa fa-file-text-o mr-1"></i>模板</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject } from "vue";
import { Editor, Transforms, Element, Text } from "slate";
import { useSlate } from "slate-vue";
import { useEditorStore } from "../stores/editorStore";
import { useTemplateStore } from "../stores/templateStore";

// 获取编辑器上下文
const editor = useSlate();
const editorStore = useEditorStore();
const templateStore = useTemplateStore();

// 格式状态
const isBoldActive = computed(() => {
  const [match] = Editor.nodes(editor, {
    match: (n: any) => Text.isText(n) && n.bold === true,
  });
  return !!match;
});

const isItalicActive = computed(() => {
  const [match] = Editor.nodes(editor, {
    match: (n: any) => Text.isText(n) && n.italic === true,
  });
  return !!match;
});

const isUnderlineActive = computed(() => {
  const [match] = Editor.nodes(editor, {
    match: (n: any) => Text.isText(n) && n.underline === true,
  });
  return !!match;
});

// 当前块类型
const currentBlockType = computed({
  get() {
    const [match] = Editor.nodes(editor, {
      match: (n: any) => Element.isElement(n),
    });
    return match?.[0].type || "paragraph";
  },
  set(value: string) {
    setBlockType(value || "paragraph");
  },
});

// 撤销/重做状态
const canUndo = computed(() => editorStore.undoStack.length > 0);
const canRedo = computed(() => editorStore.redoStack.length > 0);

// 切换格式
const toggleBold = () => {
  Transforms.setNodes(editor, { bold: !isBoldActive.value }, { match: (n: any) => Editor.isBlock(editor, n) });
};

const toggleItalic = () => {
  Transforms.setNodes(editor, { italic: !isItalicActive.value }, { match: (n: any) => Editor.isBlock(editor, n) });
};

const toggleUnderline = () => {
  Transforms.setNodes(editor, { underline: !isUnderlineActive.value }, { match: (n: any) => Editor.isBlock(editor, n) });
};

// 设置块类型
const setBlockType = (type: string) => {
  Transforms.setNodes(editor, { type }, { match: (n: any) => Editor.isBlock(editor, n) });
};

// 撤销/重做
const undo = () => {
  editorStore.undo();
};

const redo = () => {
  editorStore.redo();
};

// 插入医学术语

const insertMedicalTerm = () => {
  const term = {
    text: "2型糖尿病",
    medicalTerm: true,
  };

  Transforms.insertText(editor, term.text);
  Transforms.setNodes(editor, term, { match: (n: any) => Text.isText(n) });
};

// 添加参考文献
const addReference = () => {
  const referenceText = " [1]";
  const referenceNode = {
    text: referenceText,
    reference: "ref1",
  };

  Transforms.insertText(editor, referenceText);
  Transforms.setNodes(editor, referenceNode, { match: (n: any) => Text.isText(n) });
};

// 打开模板对话框
const openTemplateModal = () => {
  templateStore.loadTemplate("outpatient");
  if (templateStore.currentTemplate) {
    editorStore.setEditorValue(templateStore.currentTemplate?.content || []);
  } else {
    console.error("Failed to load template");
  }
};
</script>

<style scoped>
.toolbar {
  user-select: none;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
